<template>
  <view class="package_sale" v-if="userInfor.nickname">
    <view class="center">
      <view>客户基本信息</view>
      <view v-if="userInfor.label" class="center">
        <view class="but" v-for="(item,index) in JSON.parse(userInfor.label)" :key='index'>{{item}}</view>
      </view>
    </view>
    <view class="space-between" style="align-items: flex-start;font-size: 28rpx;" >
      <view>
        <view style="margin-bottom: 10rpx;">{{userInfor.nickname}}</view>
        <view class="center" style="flex-wrap: wrap;" v-if="userInfor.cart_code"><text
            v-for="(item,index) in JSON.parse(userInfor.cart_code)" :key='index'
            style="margin: 0px 15rpx 6rpx 0px;">{{item}}</text></view>
        <view class="center" style="flex-wrap: wrap;" v-if="userInfor.line"><text
            v-for="(item,index) in JSON.parse(userInfor.line)" :key='index'
            style="margin: 6rpx 15rpx 0rpx 0px;">{{item}}</text></view>
      </view>
      <view class="column">
        <image :src="userInfor.avatar" mode="" style="width:100rpx;height: 100rpx;border-radius: 5px;"></image>
        <text style="margin-top:10rpx;">ID:{{userInfor.driver_id}}</text>
      </view>
    </view>
    <view style="font-size: 28rpx;">{{userInfor.des}} <uni-icons type="compose" size="20" @click="addDeatil" color="#FFA542"></uni-icons>
    </view>
    <view class="space-between" style="margin-top: 10rpx;">
      <view style="font-size: 26rpx;">时间：{{userInfor.createtime}}</view>
      <view class="center">
        <view class="text" @click="telCall(userInfor.mobile)" v-if="userInfor.mobile"><uni-icons type="phone" size="20"
            color="#1890FF"></uni-icons></view>
        <view class="text" @click="shares(userInfor.avatar,userInfor.nickname,userInfor.image)"><uni-icons type="redo"
            size="20" color="#1890FF"></uni-icons></view>
      </view>
    </view>
  </view>
  <SharePop ref="popup"></SharePop>
  <Association :title="title" :place="place" ref="ation" @submit="submit"></Association>
</template>

<script setup lang="ts">
  import SharePop from '@c/earthPushing/customer/sharePop.vue';
  import Association from '@c/earthPushing/bullet-box/association.vue';
  import { telCall } from '@/utils/copyText';
  import { getUserInfo } from '@/gql/earthPushing/custom';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { ref } from 'vue';
  import { getDriverID } from '@/stores/driverID';
  // static
  const staff_id = getDriverID();
  const userInfor = ref({})
  const user_id = ref('')
  const popup = ref(null)
  const ation = ref(null)
  const title = ref('备注')
  const place = ref('请输入备注')
  function init(num : string) {
    showLoading()
    const payload = {
      query: getUserInfo,
      variables: {
        user_id: Number(num)
      },
    };
    toPublish(
      'ql/staff/getUserInfo',
      payload,
      (obj : any) => {
        const { getUserInfo } = obj.data;
        userInfor.value = getUserInfo
        user_id.value = getUserInfo.driver_id
      },
    );
  }
  function addDeatil() {
    ation.value.open()
  }
  function submit(des : string) {
    ation.value.close()
    showLoading()
    const payload = {
      staff_id,
      driver_id: Number(user_id.value),
      des,
    };
    toPublish('staff/addUserDes',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          init(user_id.value)
        } else {
          errorToast(msg)
        }
      }
    );
  }
  function shares(avatar : string, nickname : string, image : string) {
    popup.value.shares(avatar, nickname, image)
  }
  defineExpose({
    init
  });
</script>


<style scoped lang="less">
  .text {
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    border: 1px solid #1890FF;
    text-align: center;
    line-height: 45rpx;
    margin-left: 20rpx;
  }

  .but {
    margin-left: 15rpx;
    min-width: 80rpx;
    text-align: center;
    padding: 2rpx 8rpx;
    font-size: 24rpx;
    border: 1px solid #FFA542;
    color: #FFA542;
    border-radius: 10rpx;
  }
</style>